<template>
	<view>
				
				<view class="uni-padding-wrap uni-common-mt">
				<view class="uni-flex uni-row">
					<view class="flex-item " style="width: 140px;">
						<text id="" class="uni-input-route">东圃客运站(总站)</text>
					</view>
					<view class="flex-item">-</view>
					<view class="flex-item " style="width: 150px;">
						<text id="" class="uni-input-route">罗冲围总站(增槎路)</text>
					</view>
					<view class="flex-item " style="width: 15px;"></view>
					<view class="flex-item ">
						<image src="../../static/images/routeDetails/arrow.png" style="height: 10px;width: 13px;"></image>
					</view>
				</view>
				
				<view class="uni-flex uni-row">
					<view class="flex-item ">
						<view class="flex-item flex-item-V uni-bg-green">首</view>
					</view>
					<view class="flex-item">06:20</view>
					<view class="flex-item " style="width: 10px;"></view>
					<view class="flex-item ">
						<view class="flex-item flex-item-V uni-bg-red">末</view>
					</view>
					<view class="flex-item">22:00</view>
					
				</view>
				
				
				<view class="uni-flex uni-column">
					<view class="flex-item flex-item-V" style="background-color:#CCCCCC;">
						
						
						
						
					</view>
				</view>
				
				
            
        </view>
				
				
		<!-- 1111 -->		
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" scale="16" :markers=markers
						show-location="true" @markertap=markertap>
				</map>
			</view>
		</view>

				
				
		
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';		
	export default {
		data() {
			return {
				markers: [{}, {}, {}],
				poisdatas: [{}, {}, {}],
				title: 'map',
				latitude: 30.208487,
				longitude: 120.21202
			}
		},
		methods: {
			
		},
		
		onLoad() {
			/*
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			*/
		   
		   
		   				var that = this;
        var amapFile = require('../../common/amap-wx.js');
        var amapPlugin = new amapFile.AMapWX({
        key: "d782d52560e7b77e0d764b1496c60dde"
        });
        amapPlugin.getPoiAround({
        success: function(data) {
        //成功回调
        that.markers = data.markers;
        that.poisdatas=data.poisData;
        var markers_new = [];
        that.markers.forEach(function(item, index) {
        markers_new.push({
        id: item.id,              //marker 序号
        width: item.width,        //marker 宽度
        height: item.height,      //marker 高度
        iconPath: item.iconPath,  //marker 图标路径
        latitude: item.latitude,  //marker  纬度
        longitude: item.longitude, //marker 经度
       //自定义标记点上方的气泡窗口
        callout:{
        padding:2,        //callout 文本边缘留白
        fontSize:15,      //callout  文字大小
        bgColor:'blue',   //callout 背景颜色
        color:'#6B8E23',  //callout 文字颜色
        borderRadius:5,   //边框圆角
        display:'BYCLICK',//callout 'BYCLICK':点击显示; 'ALWAYS':常显
        content:that.poisdatas[index].name //地理位置名称
        }
        })
        })
        that.markers = markers_new;
        console.log("data", JSON.stringify(that.poisdatas));
        },
        fail: function(info) {
        //失败回调
        console.log("info", info)
        }
        })
     },
     methods: {
      //得到点击的marker的id，遍历markers数组，判断有没有相等的id
      //如果有的就能从this.poisdatas[i].address得到坐标位置（没有就提醒下）
        markertap: function(e) {
        for (var i = 0; i < this.markers.length; i++) {
        if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {
        console.log("markers" + this.poisdatas[i].name+"   "+this.poisdatas[i].address);
        uni.showToast({
        title: this.poisdatas[i].name,
        mask: false,
        duration: 1500
        });
        }
        }
 
        }
        }

		   
		   
		   
		
	}
</script>

<style>
	
	.uni-input-route{
		width:6px;
		height:4px;
		font-size:14px;
		font-family:PingFangSC-Regular;
		font-weight:549;
		color:rgba(0,0,0,1);
	}

</style>
